<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<link href="${pageContext.request.contextPath}/css/ui.multiselect.ext.css" rel="stylesheet"
  type="text/css" />
<script type="text/javascript">
  function refreshProduct() {
    jQuery.ajax({
      url : '${pageContext.request.contextPath}/inventory/product/loadProduct.action',
      dataType : 'json',
      async : false,
      cache : false,
      data : {
        'product.id' : $('#id').val()
      },
      success : function(data) {
        var name = data.name;
        var categories = data.categories;
        var length = categories.length;
        $('#name').text(name);
        var categ = '';
        for ( var i = 0; i < length; i++) {
          categ += categories[i].name;
          categ += (i < length - 1 ? ', ' : '');
        }
        $('#categories').text(categ);
      }
    });
  }

  $(function() {
    $('#viewProductButtonDiv').addClass('ui-dialog-buttonset');
    $('.submit-button').button();
    $('#productOkBtn').click(function(e) {
      e.preventDefault();
      $('#editProduct').empty();
      $('#mainListProduct').show();
    });
    $("#productAccordion").multipleaccordion();
    $('#productAccordion > div > table td.LABEL').css({
      'width' : '130px'
    });
    $('#product-view-dialog-form').wrap('<form id="product-view-form">');
    refreshProduct();

    jQuery("#listProductAttribute")
        .jqGrid(
            {
              url : '${pageContext.request.contextPath}/inventory/productAttribute/getProductAttributes.action?productAttribute.productId=${param["product.id"]}',
              datatype : "json",
              colNames : ['ID','version',
                  '<s:property value="getText(\'field.stock.keeping.unit\')" />',
                  '<s:property value="getText(\'field.product.attribute.name\')" />',
                  '<s:property value="getText(\'field.retail.price\')" />'],
              colModel : [{
                name : 'id',
                index : 'id',
                editable : false,
                hidden : true,
                editrules : {
                  edithidden : false
                },
                width : 10
              },{
                name : 'version',
                index : 'version',
                hidden : true,
                width : 2
              },{
                name : 'sku',
                index : 'pa.stockKeepingUnit',
                width : 150
              },{
                name : 'name',
                index : 'pa.name',
                width : 200,
                editable : false
              },{
                name : 'finalRetailPrice',
                index : 'finalRetailPrice',
                width : 200,
                sortable : true,
                editable : false
              }],
              jsonReader : {
                root : "rows",
                page : "page",
                total : "total",
                records : "records",
                repeatitems : false,
                id : "id",
                cell : "",
                userdata : ""
              },
              rowNum : 10,
              rowList : [10,20,30],
              pager : '#pagingProductAttribute',
              sortname : 'name',
              viewrecords : true,
              sortorder : "asc",
              multiselect : false,
              autowidth : true,
              height : 150,
              caption : "<s:property value='getText(\"title.list.product.attribute\")' />"
            }).navGrid(
            '#pagingProductAttribute',
            {
              edit : true,
              add : true,
              del : false,
              view : false,
              search : false,
              addfunc : function() {
                $('#product-view-dialog-form').hide(
                    10,
                    function() {
                      $('#productAttributeEditDialog').load(
                          'inventory/productAttribute/addProductAttribute.action',{
                            'productAttribute.productId' : $('#id').val()
                          });
                    });
              },
              editfunc : function(id) {
                $('#product-view-dialog-form').hide(
                    10,
                    function() {
                      $('#productAttributeEditDialog').load(
                          'inventory/productAttribute/editProductAttribute.action',{
                            'productAttribute.productId' : $('#id').val(),
                            'productAttribute.id' : id
                          });
                    });
              }
            });
  });
</script>
<div id="product-view-dialog-form" title='<s:property value="getText('title.view.product')"/>'>
  <div id="productAccordion">
    <h3>
      <s:property value="getText('title.product.item')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="name"><input type="hidden" id="id"
              name="product.id" value='<s:property value="%{#parameters[\"product.id\"]}" />' /> <s:property
                value="getText('field.product.name')" /></label></td>
          <td><label id="name"></label></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="categories"><s:property
                value="getText('field.product.category.name')" /></label></td>
          <td><label id="categories"></label></td>
        </tr>
      </table>
      <br />
      <div style="width: 750px;" id="mainProductAttribute">
        <table id="listProductAttribute"></table>
        <div id="pagingProductAttribute"></div>
      </div>
      <br />
    </div>
    <div id="viewProductButtonDiv">
      <button id="productOkBtn" class="submit-button">
        <s:property value="getText('button.ok')" />
      </button>
    </div>
  </div>
</div>
<div id="productAttributeEditDialog"></div>